<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="1100px" append-to-body>
        <el-form ref="form" :model="model" :rules="rules" inline label-width="170px" label-suffix=":" class="prod-form-class" v-loading="loading">
            <el-form-item label="采购单号" prop="purchase_code">
                <el-input v-model.trim="model.purchase_code" placeholder="请输入采购单号" clearable></el-input>
            </el-form-item>
            <el-form-item label="ID" prop="id">
                <el-input v-model.trim="model.id" placeholder="请输入" clearable disabled></el-input>
            </el-form-item>
            <el-form-item label="采购批次号" prop="contract_number ">
                <el-input v-model.trim="model.contract_number " placeholder="请输入合同单号" clearable></el-input>
            </el-form-item>
            <el-form-item label="SPU" prop="spu">
                <el-input v-model.trim="model.spu" placeholder="请输入SPU" clearable></el-input>
            </el-form-item>
            
            <el-form-item label="抽检数量" prop="check_nums">
                <el-input-number v-model.trim="model.check_nums" :controls="false" :min="0" :step="1" placeholder="请输入抽检数量" clearable></el-input-number>
            </el-form-item>
            <el-form-item label="未抽检数量" prop="unqualified_nums">
                <el-input-number v-model.trim="model.unqualified_nums" :controls="false" :min="0" :step="1" placeholder="请输入未抽检数量" clearable></el-input-number>
            </el-form-item>

            <el-form-item label="次品描述" prop="defective_desc" class="full">
                <el-input type="textarea" v-model.trim="model.defective_desc" placeholder="请输入次品描述" :autosize="{ minRows: 3, maxRows: 6 }" clearable></el-input>
            </el-form-item>

            <el-form-item label="附件" prop="attachment_images" class="full">
                <ImageUploadMultiple v-model="model.attachment_images" :limit="5" :multiple="true"></ImageUploadMultiple>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" :loading="save" :disabled="save" @click="submit">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { editDefectiveInfo } from '@/api/purchase'

export default {
    name: 'DefectiveInfoDetailDialog',
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        params: {
            type: Object,
            default: () => {},
        },
        type: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            loading: false,
            save: false,
            model: {
                id: undefined,
                purchase_code: undefined,
                contract_number: undefined,
                spu: undefined,
                check_nums: undefined,
                unqualified_nums: undefined,
                defective_desc: undefined,
                attachment_images: [],
            },
            rules: {},
        }
    },
    computed: {
        title() {
            return `编辑次品信息`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    mounted() {
        this.model = Object.assign({}, this.model, this.params)
    },
    methods: {
        submit() {
            const params = {
                ...this.model,
                attachment_images:Array.isArray(this.model.attachment_images) ? this.model.attachment_images : this.model.attachment_images.split(",")
                // attachment_images: Array.isArray(this.model.attachment_images) ? this.model.attachment_images.join() : this.model.attachment_images ?? '',
            }
            if (this.save) {
                return
            }
            this.save = true

            editDefectiveInfo(params)
                .then(res => {
                    this.$message.success(res.msg)
                    this.dialogVisible = false
                    this.$emit('success')
                })
                .finally(() => {
                    this.save = false
                })
        },
        cancel() {
            this.dialogVisible = false
        },
    },
}
</script>

<style>
.prod-form-class.el-form .el-form-item {
    width: 50%;
    margin-right: 0;
}
.prod-form-class.el-form .el-form-item .el-input {
    width: 250px;
}
.prod-form-class.el-form .el-form-item.w750 {
    width: 100%;
}
.prod-form-class.el-form .el-form-item.w750 .el-input {
    width: 770px;
}
.prod-form-class.el-form .el-form-item .el-textarea {
    width: 770px;
}
.prod-form-class.el-form .el-form-item.full {
    width: 100%;
}
.prod-form-class.el-form .el-form-item.full .el-input,
.prod-form-class.el-form .el-form-item.full .el-cascader {
    width: 770px;
}
.prod-form-class.el-form .el-form-item.w120 .el-input-number.w120 + .el-input-number {
    margin-left: 10px;
}
.prod-form-class.el-form .el-form-item .el-input-number,
.prod-form-class.el-form .el-form-item .el-input-number .el-input {
    width: 250px;
}
.prod-form-class.el-form .el-form-item.w120 .el-input-number.w120,
.prod-form-class.el-form .el-form-item.w120 .el-input-number.w120 .el-input {
    width: 120px;
}
.prod-form-class.el-form .el-input-number.is-without-controls .el-input__inner {
    text-align: left;
}
.custom-select .el-select-dropdown__item {
    max-width: 450px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
